<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧菜单 -->
      <div class="side">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          :collapse="isCollapse">
          <div class="sidebar-logo-container" @click="handleLogout">
            <!-- <router-link class="sidebar-logo-link"> -->
            <img v-if="logo" :src="logo" class="sidebar-logo" />
            <h1 class="sidebar-title">{{ title }}</h1>
            <!-- </router-link> -->

          </div>
          
          <el-menu-item index="1">
            <router-link to="/adminIndex/user">
    <el-icon style="color:rgb(191, 203, 217);"><UserFilled /></el-icon>
    <span>用户管理</span>
  </router-link>
  </el-menu-item>
  
          <el-menu-item index="2">
            <router-link to="/adminIndex/totalWork">
    <el-icon style="color:rgb(191, 203, 217);"><InfoFilled /></el-icon>
    <span>总工作量</span>
  </router-link>
  </el-menu-item>

  <el-menu-item index="3">
    <router-link to="/adminIndex/researchProject">
    <el-icon style="color:rgb(191, 203, 217);"><GoodsFilled /></el-icon>
    <span>科研项目工作量</span></router-link>
  </el-menu-item>

          <el-menu-item index="4">
            <router-link to="/adminIndex/academicWorks">
              <el-icon style="color:rgb(191, 203, 217);">
                <List />
              </el-icon>
              <!-- <i class="el-icon-setting"></i> -->
              <span>学术著作</span>
           </router-link>
          </el-menu-item>

          <el-menu-item index="5">
            <router-link to="/adminIndex/decisionConsulting">
              <el-icon style="color:rgb(191, 203, 217);">
                <LocationFilled />
              </el-icon>
              <!-- <i class="el-icon-setting"></i> -->
              <span>决策咨询类</span>
          </router-link>
          </el-menu-item>

          <el-menu-item index="6">
            <router-link to="/adminIndex/creativeAchievement">
              <el-icon style="color:rgb(191, 203, 217);">
                <LocationFilled />
              </el-icon>
              <!-- <i class="el-icon-setting"></i> -->
              <span>创作成果类</span>
            </router-link>
          </el-menu-item>

          <el-menu-item index="7">
            <router-link to="/adminIndex/intellectualProperty">
              <el-icon style="color:rgb(191, 203, 217);">
                <LocationFilled />
              </el-icon>
              <!-- <i class="el-icon-setting"></i> -->
              <span>知识产权类</span>
            </router-link>
          </el-menu-item>

          <el-menu-item index="8">
            <router-link to="/adminIndex/user">
              <el-icon style="color:rgb(191, 203, 217);">
                <LocationFilled />
              </el-icon>
              <!-- <i class="el-icon-setting"></i> -->
              <span>成果转化类</span>
           </router-link>
          </el-menu-item>

          <el-sub-menu index="9">
  <template #title>
    <el-icon style="color:rgb(191, 203, 217);">
      <LocationFilled />
    </el-icon>
    <span>科研奖项</span>
  </template>
  <!-- 子菜单项 -->
  <el-menu-item index="8-1">
    <router-link class="nav-link" to="/adminIndex/delivery/natural-science">
      <span>自然科学</span>
    </router-link>
  </el-menu-item>
  <el-menu-item index="8-2">
    <router-link class="nav-link" to="/adminIndex/delivery/humanities-social-science">
      <span>人文社科</span>
    </router-link>
  </el-menu-item>
</el-sub-menu>

          <el-menu-item index="10">
            <router-link to="/adminIndex/user">
              <el-icon style="color:rgb(191, 203, 217);">
                <LocationFilled />
              </el-icon>
              <!-- <i class="el-icon-setting"></i> -->
              <span>网络文化成果</span>
         </router-link>
          </el-menu-item>

          <el-menu-item index="11">
            <router-link to="/adminIndex/user">
              <el-icon style="color:rgb(191, 203, 217);">
                <LocationFilled />
              </el-icon>
              <!-- <i class="el-icon-setting"></i> -->
              <span>学术论文</span>
            </router-link>
          </el-menu-item>

          <el-menu-item index="12">
            <router-link to="/adminIndex/user">
              <el-icon style="color:rgb(191, 203, 217);">
                <LocationFilled />
              </el-icon>
              <!-- <i class="el-icon-setting"></i> -->
              <span>科技活动</span>
           </router-link>
          </el-menu-item>

          <el-menu-item index="13">
            <router-link to="/adminIndex/user">
              <el-icon style="color:rgb(191, 203, 217);">
                <LocationFilled />
              </el-icon>
              <!-- <i class="el-icon-setting"></i> -->
              <span>重要平台</span>
            </router-link>
          </el-menu-item>

        </el-menu>
      </div>
      <el-container>

        <!-- 顶部导航栏 -->
        <el-header class="navbar">
          <el-button type="text" class="toggle-button" @click="toggleCollapse">
            <el-icon>
              <Fold />
            </el-icon>
          </el-button>
          <Breadcrumb :history="history" />

          <!-- 新增的下拉菜单 -->
          <div class="user-dropdown">
            <el-dropdown>
              <span class="el-dropdown-link">
<!-- 显示用户名 -->
              <p>您好，{{ user.username }}</p>
<!--                <img src="@/assets/images/outTop.jpg" alt="User" style="width: 36px;height: 36px;border-radius: 50%;">-->
                <el-icon class="el-icon--right">
                  <ArrowDown />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 标签页 -->
        <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="handleTabClick">
          <el-tab-pane v-for="item in history" :key="item.path" :label="item.title" :name="item.path"
            :closable="item.path !== '/'" :class="{ 'is-active': item.path === editableTabsValue }">
          </el-tab-pane>
        </el-tabs>

        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import logo from '@/assets/logo/logo.png'
import { ref, watch,reactive, onMounted } from 'vue';
import { Fold, ArrowDown } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { logout } from '@/api/auth';
import {cartListUser, cartNowUser} from '@/api/user';
import { ElMessage, ElMessageBox } from 'element-plus';

const isCollapse = ref(false);
const router = useRouter();
const route = useRoute();
// 定义折叠/展开菜单的方法
function toggleCollapse() {
  console.log('Toggling collapse state:', !isCollapse.value); // 添加日志检查状态切换
  isCollapse.value = !isCollapse.value;
}
// 初始化标题
const title = ref('科研服务管理平台');
const editableTabsValue = ref('/');
const history = ref([{ title: '首页', path: '/adminIndex/user' }]);

// 定义用户信息对象
const user = reactive({
  username: '未知用户'
});

// 监听路由变化并更新历史
watch(route, (to) => {
  // 如果是首次加载或路由改变，则添加新标签页
  if (!history.value.find(item => item.path === to.path)) {
    addTab(to.path);
  } else {
    // 如果已经存在则直接激活
    editableTabsValue.value = to.path;
  }
}, { immediate: true });

// 添加标签页的方法
function addTab(path) {
  const tab = { title: route.matched.find(record => record.path === path)?.meta?.title || '未知', path };
  if (!history.value.find(item => item.path === tab.path)) {
    history.value.push(tab);
  }
  editableTabsValue.value = tab.path;
  router.push(tab.path);
}

// 移除标签页的方法
function removeTab(targetName) {
  let tabs = history.value;
  let activeName = editableTabsValue.value;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.path === targetName) {
        let nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.path;
        }
      }
    });
  }

  editableTabsValue.value = activeName;
  history.value = tabs.filter(tab => tab.path !== targetName);
  router.push(activeName);
}
// 切换标签页的方法
function handleTabClick(tab) {
  router.push(tab.props.name);
}

// 获取当前登录用户信息
const fetchCurrentUser = async () => {
  try {
    const response = await cartNowUser(); // 调用正确的 API 方法
//     console.log('response=',response)
//     const data = response.data;
// console.log('zhengzai=',response.data)
    // 更新用户信息
    user.username = response.username || '未知用户';
    // console.log('username=',response.username)
  } catch (error) {
    console.error('Failed to fetch user info:', error);
  }
};

// 处理登出逻辑的方法
async function handleLogout() {
  try {
    await logout(); // 调用logout方法
    ElMessage.success('退出登录成功'); // 显示成功信息
    router.push('/login'); // 重定向到登录页面
  } catch (error) {
    ElMessage.error('登出失败，请稍后再试'); // 显示错误信息
    console.error('Logout failed:', error);
  }
}

// 页面加载时调用
onMounted(() => {
  fetchCurrentUser();
});
</script>

<style lang="scss" scoped>
//  @import '../assets/css/app.css';
@import '../assets/css/chunkcss.css';

.el-menu-vertical-demo {
  height: 1000px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.toggle-button {
  position: absolute;
  top: 9px;
  left: 4px;
  color: #1c2127;
  width: 36px;
  /* 设置宽度 */
  height: 36px;
  /* 设置高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* 移除默认填充 */
}

/* 确保图标也适应按钮的新尺寸 */
.toggle-button .el-icon {
  font-size: 18px;
  /* 根据需要调整 */

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}



.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: rgb(48, 65, 86) !important;
  // background: #2b2f3a;
  text-align: center;
  overflow: hidden;


  .sidebar-title {
    display: inline-block;
    margin: 0;
    color: #fff !important;
    font-weight: 600;
    line-height: 50px;
    font-size: 14px;
    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
    vertical-align: middle;
  }

  .sidebar-logo {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 12px;
  }


  .collapse {
    .sidebar-logo {
      margin-right: 0px;
    }
  }
}

.el-scrollbar {
  background-color: rgb(48, 65, 86) !important;
}

.el-menu {
  background-color: rgb(48, 65, 86);
}

.el-menu-item {
  color: #fff;
}

.sidebar-logo-container .sidebar-logo-link .sidebar-logo {
  margin-right: 0px;
}

.navbar {
  height: 50px;
  overflow: visible;
  /* 确保下拉菜单可以超出此元素 */
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-dropdown {
  margin-right: 16px;
  position: relative;
  /* 确保相对定位 */
  z-index: 1000;
  /* 提高z-index以确保下拉菜单可以在最上层 */
}

/* 增加下拉菜单的 z-index 并确保其不会受到任何父元素的影响 */
:deep(.el-dropdown-menu) {
  z-index: 1001 !important;
  /* 确保下拉菜单总是在最顶层 */
  position: absolute !important;
  /* 强制绝对定位 */
}

/* 防止其他全局样式影响 */
:deep(.el-popper) {
  z-index: 1001 !important;
  /* 确保 popper 容器也在最顶层 */
}

.el-dropdown-link img {
  vertical-align: middle;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.el-breadcrumb {
  margin-left: 30px;
  margin-top: 5px;
}

.el-main {
  margin-top: -36px;
}

/* 标签页的基本样式 */
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 4px;
}

/* 激活标签页样式 */
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  background-color: rgb(64, 158, 255) !important;
  /* 蓝色背景 */
  color: #fff !important;
  /* 白色文字 */
  border-color: rgb(64, 158, 255);
  /* 蓝色边框 */
  width: 110px;

  /* 添加白色小圆点 */
  &::before {
    content: '';
    /* 空内容 */
    display: inline-block;
    width: 6px;
    /* 圆点直径 */
    height: 6px;
    /* 圆点直径 */
    background-color: #fff;
    /* 白色 */
    border-radius: 50%;
    /* 圆形 */
    margin-right: 4px;
    /* 与文字间距 */
    vertical-align: middle;
    /* 垂直居中 */
  }
}

/* 移除默认激活边框 */
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  border-bottom-color: rgb(64, 158, 255);
}

/* 确保非激活状态下的标签页有默认样式 */
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  color: black;
  /* 默认黑色文字 */
}

.sidebar-logo-container .sidebar-logo[data-v-14eadf82] {
  width: 40px;
  margin-right: 0px;
}

/* 父菜单标题样式 */
:deep(.el-sub-menu__title) {
  color: #fff !important; /* 字体颜色为白色 */
  background-color: rgb(48, 65, 86) !important; /* 默认背景颜色 */
  padding-left: 20px !important; /* 左侧内边距 */
  height: 50px; /* 高度 */
  line-height: 50px; /* 行高 */
  display: flex;
  align-items: center; /* 图标和文字垂直居中对齐 */

  /* 图标和文字间距 */
  // .el-icon {
  //   margin-right: 10px;
  // }
}

/* 父菜单标题鼠标悬停时的背景颜色 */
:deep(.el-sub-menu__title:hover) {
  background-color: #313e51 !important; /* 悬停时背景颜色 */
}

/* 子菜单项样式 */
:deep(.el-sub-menu .el-menu-item) {
  color: #fff !important; /* 字体颜色为白色 */
  background-color: rgb(48, 65, 86) !important; /* 背景颜色 */
  padding-left: 40px !important; /* 增加缩进，区分层级 */
  height: 50px; /* 高度 */
  line-height: 50px; /* 行高 */
}

/* 子菜单项鼠标悬停时的背景颜色 */
:deep(.el-sub-menu .el-menu-item:hover) {
  background-color: #313e51 !important; /* 悬停时背景颜色 */
}

/* 弹出层背景颜色 */
:deep(.el-menu--popup) {
  background-color: rgb(48, 65, 86) !important; /* 弹出层背景颜色 */
  border: none !important; /* 去掉边框 */
}

/* 弹出层中的子菜单项样式 */
:deep(.el-menu--popup .el-menu-item) {
  color: #fff !important; /* 字体颜色为白色 */
  background-color: rgb(48, 65, 86) !important; /* 背景颜色 */
  padding-left: 20px !important; /* 左侧内边距 */
  height: 50px; /* 高度 */
  line-height: 50px; /* 行高 */
}

/* 弹出层中的子菜单项鼠标悬停时的背景颜色 */
:deep(.el-menu--popup .el-menu-item:hover) {
  background-color: #313e51 !important; /* 悬停时背景颜色 */
}

/* 折叠模式下的样式 */
// .el-menu--collapse :deep(.el-sub-menu__title) {
//   padding-left: 10px !important; /* 折叠时的内边距 */
// }

.el-menu--collapse :deep(.el-sub-menu .el-menu-item) {
  padding-left: 20px !important; /* 折叠时子菜单项的内边距 */
}
/* 确保 <span> 在折叠状态下隐藏 */
  .el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu__title span {
  display: none;
}

</style>

